<template>
	<div class="head">
		<div class="head_actions head_left">
			<div class="head_btn" :class="{ 'head_btn--active': contain.menuShow }" @click="handleFlag('menuShow')">
				<el-tooltip effect="dark" content="图层" placement="top">
					<i class="el-icon-s-operation"></i>
				</el-tooltip>
			</div>
			<!-- <div
                class="head_btn"
                :class="{ 'head_btn--active': contain.compShow }"
                @click="handleFlag('compShow')"
            >
                <el-tooltip effect="dark" content="组件库" placement="top">
                    <i class="el-icon-s-home"></i>
                </el-tooltip>
            </div> -->
			<div class="head_btn" :class="{ 'head_btn--active': contain.paramsShow }" @click="handleFlag('paramsShow')">
				<el-tooltip effect="dark" content="操作" placement="top">
					<i class="el-icon-setting"></i>
				</el-tooltip>
			</div>
			<el-popover placement="bottom" width="360" trigger="hover" @show="handleBaseShowComp">
				<div class="header-title-menu">
					<div class="name">基础组件（{{ baseCompLength }}）</div>
					<el-input placeholder="请输入组件名称" v-model="componentName" class="input-with-select" size="mini">
						<el-button slot="append" icon="el-icon-search" @click="getCompList('BASE')"></el-button>
					</el-input>
				</div>
				<el-menu
					class="header-nav-menu"
					mode="vertical"
					background-color="#212528"
					text-color="#fff"
					active-text-color="#409EFF"
					:unique-opened="true"
					@mousedown="contain.handleMouseDown"
					v-loading="loading"
					element-loading-text="拼命加载中"
					element-loading-spinner="el-icon-loading"
					element-loading-background="rgba(0, 0, 0, 0.8)"
				>
					<el-submenu :index="index + ''" v-for="(item, index) in baseList" :key="index">
						<template slot="title">
							<el-tooltip effect="dark" :content="item.label" placement="left">
								<i :class="'nav__icon iconfont ' + item.icon"></i>
							</el-tooltip>
							<span class="name">{{ item.label }}（{{ item.children.length }}）</span>
						</template>
						<div class="components-menu">
							<el-menu-item v-for="(citem, cindex) in item.children" @click="handleAdd(citem.option, true)" :key="cindex" class="menu-inline" :index="`${index}-${cindex}`">
								<div class="usehove">
									<div class="bottom-text" :title="citem.label">
										{{ citem.label }}
									</div>
									<img :src="citem.thumbnail" class="inside-img" />
								</div>
							</el-menu-item>
						</div>
					</el-submenu>
				</el-menu>
				<el-button class="head-comp-popover" type="primary" size="mini" icon="el-icon-s-data" slot="reference"></el-button>
			</el-popover>
			<!-- 自定义组件 -->
			<el-popover placement="bottom" width="360" trigger="hover" @show="handleCustomShowComp">
				<div class="header-title-menu">
					<div class="name">自定义组件（{{ customCompLength }}）</div>
					<el-input placeholder="请输入组件名称" v-model="componentName" class="input-with-select" size="mini">
						<el-button slot="append" icon="el-icon-search" @click="getCompList('CUSTOMIZED')"></el-button>
					</el-input>
				</div>
				<el-menu
					class="header-nav-menu"
					mode="vertical"
					background-color="#212528"
					text-color="#fff"
					active-text-color="#409EFF"
					:unique-opened="true"
					@mousedown="contain.handleMouseDown"
					v-loading="loading"
					element-loading-text="拼命加载中"
					element-loading-spinner="el-icon-loading"
					element-loading-background="rgba(0, 0, 0, 0.8)"
				>
					<el-submenu :index="index + ''" v-for="(item, index) in customList" :key="index">
						<template slot="title">
							<el-tooltip effect="dark" :content="item.label" placement="left">
								<i :class="'nav__icon iconfont ' + item.icon"></i>
							</el-tooltip>
							<span class="name">{{ item.label }}（{{ item.children.length }}）</span>
						</template>
						<div class="components-menu">
							<el-menu-item v-for="(citem, cindex) in item.children" @click="handleAdd(citem.option, true)" :key="cindex" class="menu-inline" :index="`${index}-${cindex}`">
								<div class="usehove">
									<div class="bottom-text" :title="citem.label">
										{{ citem.label }}
									</div>
									<img :src="citem.thumbnail" class="inside-img" />
								</div>
							</el-menu-item>
						</div>
					</el-submenu>
				</el-menu>
				<el-button class="head-comp-popover" type="primary" size="mini" icon="el-icon-s-custom" slot="reference"></el-button>
			</el-popover>
			<!-- 业务组件 -->
			<el-popover placement="bottom" width="360" trigger="hover" @show="handleBusShowComp">
				<div class="header-title-menu">
					<div class="name">业务组件（{{ businessCompLength }}）</div>
					<el-input placeholder="请输入组件名称" v-model="componentName" class="input-with-select" size="mini">
						<el-button slot="append" icon="el-icon-search" @click="getCompList('BUSINESS')"></el-button>
					</el-input>
				</div>
				<el-menu
					class="header-nav-menu"
					mode="vertical"
					background-color="#212528"
					text-color="#fff"
					active-text-color="#409EFF"
					:unique-opened="true"
					@mousedown="contain.handleMouseDown"
					v-loading="loading"
					element-loading-text="拼命加载中"
					element-loading-spinner="el-icon-loading"
					element-loading-background="rgba(0, 0, 0, 0.8)"
				>
					<el-submenu :index="index + ''" v-for="(item, index) in businessList" :key="index">
						<template slot="title">
							<el-tooltip effect="dark" :content="item.label" placement="left">
								<i :class="'nav__icon iconfont ' + item.icon"></i>
							</el-tooltip>
							<span class="name">{{ item.label }}（{{ item.children.length }}）</span>
						</template>
						<div class="components-menu">
							<el-menu-item v-for="(citem, cindex) in item.children" @click="handleAdd(citem.option, true)" :key="cindex" class="menu-inline" :index="`${index}-${cindex}`">
								<div class="usehove">
									<div class="bottom-text" :title="citem.label">
										{{ citem.label }}
									</div>
									<img :src="citem.thumbnail" class="inside-img" />
								</div>
							</el-menu-item>
						</div>
					</el-submenu>
				</el-menu>
				<el-button class="head-comp-popover" type="primary" size="mini" icon="el-icon-s-grid" slot="reference"></el-button>
			</el-popover>
		</div>
		<!-- 中间区域 -->
		<div class="head_info">
			<span class="name">{{ contain.config.name }}</span>
			<avue-select v-model="selectComp" filterable size="mini" :dic="layerList" placeholder="搜索画布中的图层" @change="searchCanvasComp"> </avue-select>

			<div class="head_btn" @click="handleBluePrint">
				<el-tooltip effect="dark" content="蓝图编辑器" placement="top">
					<i class="el-icon-set-up"></i>
				</el-tooltip>
			</div>
			<div class="head_btn" @click="handleClearCanvas">
				<el-tooltip effect="dark" content="清空" placement="top">
					<i class="el-icon-delete"></i>
				</el-tooltip>
			</div>
		</div>

		<div class="head_actions">
			<div class="head_btn" @click="handleBuild">
				<el-tooltip effect="dark" content="保存" placement="top">
					<i class="iconfont icon-build"></i>
				</el-tooltip>
			</div>
			<div class="head_btn" @click="handleUpdateCover">
				<el-tooltip effect="dark" content="更新封面" placement="top">
					<i class="el-icon-picture"></i>
				</el-tooltip>
			</div>
			<div class="head_btn" @click="handleSnapshoot">
				<el-tooltip effect="dark" content="版本快照" placement="top">
					<i class="el-icon-camera-solid"></i>
				</el-tooltip>
			</div>
			<div class="head_btn" :disabled="!contain.canRedo" @click="contain.editorRedo">
				<el-tooltip effect="dark" content="tips" placement="top">
					<i class="nav__icon el-icon-eleme"></i>
					<div slot="content">
						<div class="tip-row">保存 <span class="tip-order">CTRL+S</span></div>
						<div class="tip-row">复制 <span class="tip-order">CTRL+0</span></div>
						<div class="tip-row">粘贴 <span class="tip-order">CTRL+.</span></div>
						<div class="tip-row">删除 <span class="tip-order">CTRL+Del</span></div>
						<div class="tip-row">撤销 <span class="tip-order">CTRL+Z</span></div>
						<div class="tip-row">重做 <span class="tip-order">CTRL+Y</span></div>
					</div>
				</el-tooltip>
			</div>
			<div class="head_btn" @click="handleImg">
				<el-tooltip effect="dark" content="导出图片" placement="top">
					<i class="el-icon-camera"></i>
				</el-tooltip>
			</div>
			<div class="head_btn" @click="$refs.result.show = true">
				<el-tooltip effect="dark" content="导入导出" placement="top">
					<i class="el-icon-download"></i>
				</el-tooltip>
			</div>
			<div class="head_btn" @click="handleShare">
				<el-tooltip effect="dark" content="发版" placement="top">
					<i class="el-icon-s-promotion"></i>
				</el-tooltip>
			</div>
			<div class="head_btn" :disabled="!contain.canUndo" @click="contain.editorUndo">
				<el-tooltip effect="dark" content="撤销" placement="top">
					<i class="nav__icon el-icon-refresh-left"></i>
				</el-tooltip>
			</div>
			<div class="head_btn" :disabled="!contain.canRedo" @click="contain.editorRedo">
				<el-tooltip effect="dark" content="重做" placement="top">
					<i class="nav__icon el-icon-refresh-right"></i>
				</el-tooltip>
			</div>

			<div class="head_btn" @click="handleBackList">
				<el-tooltip effect="dark" content="主页" placement="top">
					<i class="el-icon-s-home"></i>
				</el-tooltip>
			</div>
		</div>
		<result ref="result"></result>
		<!-- 发版 -->
		<el-dialog title="发版" :visible.sync="dialogFormVisible" :append-to-body="true" :close-on-click-modal="false" custom-class="publish-dialog">
			<el-form :model="form">
				<el-form-item label="大屏名称" label-width="120px">
					<el-input v-model="form.name" disabled autocomplete="off"></el-input>
				</el-form-item>

				<el-form-item label="大屏链接" label-width="120px">
					<el-input type="textarea" :rows="8" disabled v-model="form.link" autocomplete="off"></el-input>
					<span class="copyLink" @click="handleCopyLink">复制链接</span>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button type="primary" @click="publish">查看大屏</el-button>
			</div>
		</el-dialog>

		<!-- 快照 -->
		<el-dialog
			title="快照管理"
			:visible.sync="snapshootDialog.visible"
			:append-to-body="true"
			:close-on-click-modal="false"
			custom-class="publish-dialog"
			@open="snapDialogOpen"
		>
			<avue-crud ref="snapCrud" :option="snapshootDialog.option" :data="snapshootDialog.data" @row-del="rowDelSnap" @row-update="rowUpdateSnap">
				<template slot="status" slot-scope="{ row }">
					<el-tag type="success" v-if="row.status === 1">已发版</el-tag>
				</template>
				<template slot-scope="scope" slot="menuLeft">
					<el-button type="primary" icon="el-icon-plus" size="small" @click="handleSnapAdd">新增</el-button>
				</template>
				<template slot-scope="{ row, index }" slot="menu">
					<el-button type="text" icon="el-icon-s-promotion" size="small" @click="handleSnapPublish(row, index)">发版</el-button>
				</template>
			</avue-crud>
		</el-dialog>
	</div>
</template>

<script>
import { uuid } from '@/utils/utils';
import { basePrefix } from '@/config';
import result from './result';
import { updateComponent, getObj } from '@/api/visual';
import { mapState, mapGetters } from 'vuex';
import { getList } from '@/api/componentList';
export default {
	inject: ['contain'],
	components: {
		result
	},
	computed: {
		...mapState({
			activeComps: state => state.activeComps,
			compsList: state => state.compsList
		}),
		...mapGetters(['activeCompsIndex']),
		canvasDetails() {
			return JSON.parse(JSON.stringify(this.contain.config));
		},
		layerList() {
			return this.compsList.map(c => {
				return {
					label: c.name + '(' + c.index.slice(0, 6) + ')',
					value: c.index
				};
			});
		}
	},
	// props: {
	//     currentHistoryIndex: {
	//         type: Number,
	//         default: 0
	//     }
	// },
	data() {
		return {
			selectComp: '',
			baseCompLength: 0,
			customCompLength: 0,
			businessCompLength: 0,
			loading: false,
			businessList: [],
			customList: [],
			baseList: [],
			componentName: '',
			routeUrl: '',
			dialogFormVisible: false,
			form: {
				name: '',
				link: ''
			},
			snapshootDialog: {
				visible: false,
				option: {
					height: 300,
					menu: true,
					menuWidth: 200,
					refreshBtn: false,
					columnBtn: false,
					addBtn: false,
					index: true,
					column: [
						{
							label: '创建时间',
							span: 12,
							disabled: true,
							editDisplay: false,
							prop: 'createDate'
						},
						{
							label: '状态',
							span: 12,
							disabled: true,
							editDisplay: false,
							prop: 'status',
							slot: true
						},
						{
							label: '备注信息',
							span: 24,
							type: 'textarea',
							prop: 'remark'
						}
					]
				},
				data: []
			}
		};
	},
	methods: {
		handleBaseShowComp() {
			this.componentName = '';
			this.getCompList('BASE');
		},
		handleCustomShowComp() {
			this.componentName = '';
			this.getCompList('CUSTOMIZED');
		},
		handleBusShowComp() {
			this.componentName = '';
			this.getCompList('BUSINESS');
		},
		// 从组件库初始化组件进入画布
		handleAdd(option, first = false) {
			let obj = this.deepClone(option);
			if (obj.children) {
				this.$store.commit('setCanvasCompsList', obj.children);
			} else {
				obj.left = 0;
				obj.top = 0;
				obj.display = true;
				obj.isLock = false;
				obj.index = uuid();
				if (first) {
					this.$store.commit('setCanvasCompsList', [obj]);
				} else {
					this.contain.nav.push(obj);
				}
			}
		},
		getCompList(componentType) {
			this.loading = true;
			getList({
				componentType: componentType,
				current: 1,
				size: 200,
				name: this.componentName
			})
				.then(res => {
					let data = res.data.data.records;
					data.forEach(d => {
						d.label = d.name;
						d.option = JSON.parse(d.componentJson || '{}');
					});
					let result = [
						{
							icon: 'icon-bar',
							label: '图表',
							classify: 'CHART',
							children: []
						},
						{
							icon: 'icon-text',
							label: '表单',
							classify: 'FORM',
							children: []
						},
						{
							icon: 'icon-img',
							label: '媒体',
							classify: 'MEDIA',
							children: []
						},
						{
							icon: 'icon-flop',
							label: '指标',
							classify: 'TARGET',
							children: []
						},
						{
							icon: 'icon-table',
							label: '表格',
							classify: 'TABLE',
							children: []
						},
						{
							icon: 'icon-datav',
							label: '其它',
							classify: 'OTHER',
							children: []
						}
					];
					data.map(d => {
						if (d.classify == 'CHART') {
							result[0].children.push(d);
						}
						if (d.classify == 'FORM') {
							result[1].children.push(d);
						}
						if (d.classify == 'MEDIA') {
							result[2].children.push(d);
						}
						if (d.classify == 'TARGET') {
							result[3].children.push(d);
						}
						if (d.classify == 'TABLE') {
							result[4].children.push(d);
						}
						if (d.classify == 'OTHER') {
							result[5].children.push(d);
						}
					});
					switch (componentType) {
						case 'BASE':
							this.baseCompLength = data.length;
							this.baseList = result;
							break;
						case 'CUSTOMIZED':
							this.customCompLength = data.length;
							this.customList = result;
							break;
						case 'BUSINESS':
							this.businessCompLength = data.length;
							this.businessList = result;
							break;
						default:
							break;
					}
				})
				.catch(() => {})
				.finally(() => {
					this.loading = false;
				});
		},
		handleFlag(name) {
			this.contain[name] = !this.contain[name];
			this.$nextTick(() => {
				this.contain.setScale(document.getElementsByClassName('section')[0].clientWidth);
			});
		},
		handleBluePrint() {
			let newRouteUrl = this.$route.fullPath.replace(/^\/build/, '/bluePrint');
			this.$router.push({
				path: newRouteUrl,
				query: {
					title: this.contain.config.name
				}
			});
		},
		// 清空画布
		handleClearCanvas() {
			this.$confirm('此操作将清空画布, 是否确定?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			})
				.then(() => {
					this.$store.commit('clearAllCompsList');
					this.$message({
						type: 'success',
						message: '清空画布成功!'
					});
				})
				.catch(() => {
					this.$message({
						type: 'info',
						message: '已取消清空'
					});
				});
		},
		// 更新封面
		handleUpdateCover(fn) {
			let isFun = typeof fn === 'function';
			if (!isFun && this.$route.params.id <= 100 && this.$website.isDemo) {
				this.$message.error(this.$website.isDemoTip);
				return;
			}
			this.contain.handleInitActive();
			const loading = this.$loading({
				lock: true,
				text: '正在更新封面，请稍后',
				spinner: 'el-icon-loading',
				background: 'rgba(0, 0, 0, 0.7)'
			});
			this.canvasDetails.snapData = this.snapshootDialog.data;
			this.$nextTick(() => {
				html2canvas(document.getElementById('content'), {
					useCORS: true,
					backgroundColor: null,
					allowTaint: true
				}).then(canvas => {
					function dataURLtoFile(dataurl, filename) {
						var arr = dataurl.split(','),
							mime = arr[0].match(/:(.*?);/)[1],
							bstr = atob(arr[1]),
							n = bstr.length,
							u8arr = new Uint8Array(n);
						while (n--) {
							u8arr[n] = bstr.charCodeAt(n);
						}
						return new File([u8arr], filename, { type: mime });
					}
					var file = dataURLtoFile(canvas.toDataURL('image/jpeg', 0.1), new Date().getTime() + '.jpg');
					var formdata = new FormData();
					formdata.append('file', file);
					axios
						.post(basePrefix + '/visual/put-file', formdata, {
							headers: {
								'Content-Type': 'multipart/form-data'
							}
						})
						.then(res => {
							const data = res.data.data;
							const url = data.link;
							const formdata = {
								visual: {
									id: this.contain.visual.id,
									backgroundUrl: url
								},
								config: {
									id: this.contain.obj.config.id,
									visualId: this.contain.visual.id,
									detail: JSON.stringify(this.canvasDetails),
									component: JSON.stringify(this.compsList)
								}
							};
							return updateComponent(formdata);
						})
						.then(() => {
							loading.close();
							if (isFun) {
								fn();
							} else {
								this.$message.success('封面更新成功');
							}
						})
						.catch(err => {
							console.log(err);
							this.$message.error('封面更新失败，请检查服务端配置');
							loading.close();
						});
				});
			});
		},
		handleBuild(fn) {
			let isFun = typeof fn === 'function';
			if (!isFun && this.$route.params.id <= 100 && this.$website.isDemo) {
				this.$message.error(this.$website.isDemoTip);
				return;
			}
			this.contain.handleInitActive();
			const loading = this.$loading({
				lock: true,
				text: '正在保存配置，请稍后',
				spinner: 'el-icon-loading',
				background: 'rgba(0, 0, 0, 0.7)'
			});
			this.canvasDetails.snapData = this.snapshootDialog.data;
			this.$nextTick(() => {
				const formdata = {
					visual: {
						id: this.contain.visual.id,
						backgroundUrl: this.contain.visual.backgroundUrl
					},
					config: {
						id: this.contain.obj.config.id,
						visualId: this.contain.visual.id,
						detail: JSON.stringify(this.canvasDetails),
						component: JSON.stringify(this.compsList)
					}
				};
				updateComponent(formdata)
					.then(() => {
						loading.close();
						if (isFun) {
							fn();
						} else {
							this.$message({
								showClose: true,
								message: '大屏配置保存成功',
								type: 'success'
							});
						}
					})
					.catch(err => {
						console.log(err);
						this.$message.error('大屏配置保存失败，请检查服务端配置');
						loading.close();
					});
			});
		},

		handleImg() {
			this.$confirm('是否导出大屏图片？', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			})
				.then(() => {
					this.$Screenshot(document.querySelector('#wrapper')).then(canvas => {
						this.downFile(canvas.toDataURL('image/jpeg', 0.8), new Date().getTime());
						this.$message.success('图片导出成功');
					});
				})
				.catch(() => {});
		},
		handleShare() {
			let routeUrl = this.$route.fullPath.replace(/build/, 'view');
			this.dialogFormVisible = true;
			this.form.name = this.contain.config.name;
			this.form.link = window.location.host + routeUrl;
			this.routeUrl = routeUrl;
			// this.handleBuild(() => {
			//     let routeUrl = this.$router.resolve({
			//         path: "/view/" + this.contain.id
			//     });
			//     this.$confirm(
			//         `<p>大屏${this.contain.visual.title}已发布成功，可点击确定进行查看</p>
			//         <p>大屏ID：${this.contain.id}</p>
			//         `,
			//         "发版成功",
			//         {
			//             dangerouslyUseHTMLString: true,
			//             confirmButtonText: "",
			//             cancelButtonText: "",
			//             showCancelButton: false,
			//             // showConfirmButton: false,
			//             type: "success"
			//         }
			//     )
			//         .then(() => {
			//             window.open(routeUrl.href, "_blank");
			//             console.log("routeUrl", routeUrl);
			//         })
			//         .catch(() => {});
			// });
		},
		publish() {
			window.open(this.routeUrl, '_blank');
		},
		handleCopyLink() {
			this.$Clipboard({
				text: this.form.link
			})
				.then(() => {
					this.$message.success('复制成功');
				})
				.catch(() => {
					this.$message.error('复制失败');
				});
		},
		handleBackList() {
			this.$router.push('/');
		},
		// 快照
		handleSnapshoot() {
			this.snapshootDialog.visible = true;
		},
		// 获取快照信息
		snapDialogOpen() {
			const id = this.$route.params.id;
			getObj(id).then(res => {
				const { config } = res.data.data;
				let detail = JSON.parse(config.detail);
				this.snapshootDialog.data = detail.snapData || [];
			});
		},
		// 新增快照
		handleSnapAdd() {
			if (this.snapshootDialog.data && this.snapshootDialog.data.length == 5) {
				this.$message.warning('最多只能创建5个快照');
				return false;
			}
			let createDate = new Date().toLocaleDateString() + ' ' + new Date().toLocaleTimeString();

			let canvasJson = JSON.parse(JSON.stringify(this.contain.config));
			let canvasComponents = JSON.parse(JSON.stringify(this.compsList));

			this.snapshootDialog.data.push({
				createDate: createDate,
				remark: '',
				status: 0,
				detail: this.canvasDetails,
				component: canvasComponents
			});
			canvasJson.snapData = this.snapshootDialog.data;

			const formdata = this.formatterCanvasData(canvasJson, canvasComponents);

			updateComponent(formdata)
				.then(() => {
					this.$message.success('快照新建成功');
				})
				.catch(() => {});
		},
		formatterCanvasData(detail, component) {
			return {
				visual: {
					id: this.contain.visual.id,
					backgroundUrl: this.contain.visual.backgroundUrl
				},
				config: {
					id: this.contain.obj.config.id,
					visualId: this.contain.visual.id,
					detail: JSON.stringify(detail),
					component: JSON.stringify(component)
				}
			};
		},
		// 快照发版
		handleSnapPublish(item, index) {
			let { component, detail } = item;
			let canvasDetail = JSON.parse(JSON.stringify(detail));
			this.snapshootDialog.data.forEach((snap, sIndex) => {
				snap.status = 0;
				if (index == sIndex) {
					snap.status = 1;
				}
			});
			canvasDetail.snapData = this.snapshootDialog.data;
			const formdata = this.formatterCanvasData(canvasDetail, component);
			updateComponent(formdata)
				.then(() => {
					this.$message.success('快照发版成功');
					this.$parent.$refs.container.initSnapData(detail, component);
				})
				.catch(() => {});
		},
		// 删除快照
		rowDelSnap(row) {
			this.$confirm('此操作将永久删除, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			})
				.then(() => {
					let index = row.$index;
					this.snapshootDialog.data.splice(index, 1);
					let canvasJson = JSON.parse(JSON.stringify(this.contain.config));
					let canvasComponents = JSON.parse(JSON.stringify(this.compsList));
					canvasJson.snapData = this.snapshootDialog.data;
					const formdata = this.formatterCanvasData(canvasJson, canvasComponents);
					return updateComponent(formdata);
				})
				.then(() => {
					this.$message.success('快照删除成功');
				});
		},
		// 编辑快照
		rowUpdateSnap(row, index, done, loading) {
			this.snapshootDialog.data.splice(index, 1, row);
			let canvasJson = JSON.parse(JSON.stringify(this.contain.config));
			let canvasComponents = JSON.parse(JSON.stringify(this.compsList));
			canvasJson.snapData = this.snapshootDialog.data;
			const formdata = this.formatterCanvasData(canvasJson, canvasComponents);
			updateComponent(formdata)
				.then(() => {
					this.$message.success('快照编辑成功');
					done();
					loading();
				})
				.catch(() => {
					loading();
				});
		},
		// 搜索画布中的图层
		searchCanvasComp({ value }) {
			if (!value) {
				this.$store.commit('clearActiveComps');
			} else {
				let selectComp = this.compsList.filter(c => c.index == value);
				this.$parent.$refs.layer.handleSetActive(selectComp[0]);
			}
		}
	}
};
</script>

<style lang="scss">
.build {
	.head {
		.head_btn--active {
			background-color: #409eff !important;
			height: 28px;
		}
		.head-comp-popover {
			margin-left: 3px;
		}
	}
}
.header-title-menu {
	background: #333;
	color: #fff;
	padding: 0 20px;
	height: 50px;
	font-size: 16px;
	font-weight: bold;
	display: flex;
	align-items: center;
	// text-align: center;
	.name {
		white-space: nowrap;
		margin-right: 20px;
	}
}
.header-nav-menu {
	border-right: solid 0px #e6e6e6;
	max-height: 80vh;
	overflow: scroll;
}
.el-popover {
	padding: 0px;
	background: #606266;
	border: 1px solid #333;
}
.el-submenu__title {
	.name {
		margin-left: 10px;
	}
}
.components-menu {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
	padding: 10px;
}
.head {
	position: relative;
	height: 39px;
	padding-right: 8px;
	display: flex;
	z-index: 100;
	align-items: center;
	user-select: none;
	border-bottom: 1px solid #000;
	color: var(--datav-gui-font-color-base);
	background: #1d1e1f;
	&_actions {
		position: absolute;
		top: 0;
		right: 8px;
		width: 300px;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		height: 40px;
	}
	&_left {
		left: 8px;
		justify-content: flex-start;
	}
	&_btn {
		margin-left: 4px;
		width: 40px;
		height: 24px;
		line-height: 26px;
		text-align: center;
		cursor: pointer;
		background: #303640;
		transition: 0.2s;
		display: flex;
		justify-content: center;
		align-items: center;
		i {
			color: #fff;
		}
		&--active {
			background-color: #2681ff;
		}
	}
	&_info {
		position: absolute;
		left: 50%;
		top: 0;
		transform: translateX(-50%);
		text-align: center;
		cursor: default;
		font-size: 14px;
		max-width: 500px;
		font-weight: bold;
		color: #fff;
		line-height: 40px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		display: flex;
		align-items: center;
		.name {
			margin-right: 5px;
		}
		i {
			// margin-right: 8px;
			font-size: 20px;
			cursor: pointer;
		}
	}
}
.publish-dialog {
	.copyLink {
		color: #409eff;
		cursor: pointer;
	}
}
</style>
<style>
.head_btn {
	box-shadow: inset 0 0 0 1px rgb(255 235 235 / 10%), 0 0 0 1px #181818;
}
.tip-row {
	display: flex;
	margin: 5px 0;
	justify-content: space-between;
	align-items: center;
}
.tip-order {
	border-radius: 2px;
	padding: 4px 6px;
	color: #08a1db;
	background: #262b33;
	font-weight: 700;
}
</style>
